import { Component } from '@angular/core';

@Component({
  selector: 'hello-angular',
  template: `
    <div class="angular-component">
      <h2>Hello from Angular!</h2>
      <p>This component is built with Angular {{ version }}</p>
      <div class="counter-section">
        <p>Angular Counter: {{ count }}</p>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
      </div>
    </div>
  `,
  styles: [`
    .angular-component {
      padding: 20px;
      background-color: #f0f7ff;
      border-radius: 8px;
      border: 1px solid #3f51b5;
    }
    h2 {
      color: #3f51b5;
      margin-bottom: 10px;
    }
    .counter-section {
      margin-top: 20px;
    }
    button {
      padding: 5px 10px;
      margin: 0 5px;
      background-color: #3f51b5;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #303f9f;
    }
  `]
})
export class HelloAngularComponent {
  version = '16.0.0';
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}